<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <style>
        h1,h5{
            text-align: center;
            display: block;
            background: #e9ecef;
        }
        h1{
            color: #212529;
            padding-top: 50px;
            padding-bottom: 20px;
        }
        h5{
            font-weight: 100;
            padding-bottom: 50px;
        }
        .list li{
            float: left;
           width: 33.3333%  ;
            border-top: 1px solid #ddd;
            margin-top: 10px;
        }
        li span{
            border-top: 1px solid #ddd;
            padding: 10px;
            width: 33.3333%;
            float: left;
        }
        li::before,
        li::after{
            clear: both;
            content: "";
            display: block;
        }
        ul::before,
        ul::after{
            clear: both;
            content: "";
            display: block;
        }
        input{
            width: 253px;
            height: 39px;
            padding-left: 10px;
        }
        select {
            display: inline-block;
            height: 39px;
            width: 253px;
        }
        button{
            display: inline-block;
            background: #007bff;
            color: #fff;
            padding:11px 111px;
            border: 0;
        }
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .container{
            width: 1140px;
            margin: auto;
            display: block;
        }
    </style>
</head>
<body>
<h1>学员信息表</h1>
<h5>1804</h5>
<div class="container">
    <h2>添加</h2>
<input type="text"  id="a" placeholder="名字" >
<select id="b" >
    <option value="男">男</option>
    <option value="女">女</option>
</select>
<input  id="c" type="text" placeholder="年龄">
<button id="btn">添加</button>
    <h2>列表</h2>
    <ul class="list">
        <li>名字</li>
        <li>性别</li>
        <li>年龄</li>
    </ul>
    <ul id="list"></ul>
</div>
<script>

    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {

                var json = JSON.parse(xmlhttp.responseText);
                console.log(json);
                document.querySelector("#list").innerHTML ="";
                for (let i=json.data.length-1; i>=0;i--){
                    var li = document.createElement("li");
                    var spanName = document.createElement("span");
                    spanName.innerHTML = json.data[i].studentName;
                    var spansex = document.createElement("span");
                    spansex.innerHTML = json.data[i].sex;
                    var spanAge = document.createElement("span");
                    spanAge.innerHTML = json.data[i].age;
                    li.appendChild(spanName);
                    li.appendChild(spansex);
                    li.appendChild(spanAge);
                    document.querySelector("#list").appendChild(li);

                }
//                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();
    document.querySelector("#btn").addEventListener("click",function () {
    var a = document.querySelector("#a").value;
    var b = document.querySelector("#b").value;
    console.log(b);
    var c = document.querySelector("#c").value;
    console.log(c);
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            console.log(xmlhttp.responseText);
            loadXMLDoc()
        }
    xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+a+"&sex="+b+"&age="+c,true);
    xmlhttp.send();
})
</script>
</body>
</html>